<template>
	<view class="page">
		<view class="teacher">
			<view class="header"><text>老师样本管理</text></view>

			<view class="upload">
				<uni-file-picker ref="fileUpload" v-model="imageVal" title="老师准备上传的样本" fileMediatype="image" mode="grid" @success="onFileSuccess" />
			</view>

			<!-- <view class="">
				<uni-easyinput class="u-m-t-20" trim="all" v-model="sampleName" placeholder="请输入样本图片的名称"></uni-easyinput>
			</view> -->
			<!-- <view class="file-box">
				<view class="title"><text>已上传样本图片</text></view>
				<view class="file"><image class="file-img" v-for="(item, index) in uploadList" :key="index" :src="item" lazy-load @tap="previewImage(item)"></image></view>
			</view> -->

			<view class="sample">
				<view class="title"><text>已上传样本图片</text></view>

				<scroll-view class="sample-scroll" scroll-x scroll-with-animation>
					<view class="sample-scroll-box">
						<view class="sample-scroll-box-item" v-for="(item, index) in sampleImgList" :key="item._id" @tap="previewImage(item.url)">
							<image class="img" :src="item.url"></image>
							<text class="name">{{ item.name }}</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<i-button shape="circle" width="500rpx" height="80rpx" margin="30rpx auto" @click="navToResult">查看对比结果</i-button>

			<uni-fab horizontal="right" vertical="bottom" :popMenu="false" :pattern="{ icon: 'chat' }" @fabClick="onFabClick" />
		</view>
	</view>
</template>

<script setup>
import { ref, computed, getCurrentInstance } from 'vue'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'

const imageVal = ref({})
const fileUpload = ref(null)

const imageStyles = ref({
	width: 128,
	height: 128,
	border: {
		color: '#ff5a5f',
		width: 2,
		style: 'dashed',
		radius: '2px'
	}
})

const sampleName = ref('')
const sampleImgList = ref([])

onLoad(() => {
	getSample()
	// const tempFiles = uni.getStorageSync('tempFiles')
	// if (tempFiles && tempFiles.length) {
	// 	sampleImgList.value = tempFiles.map((item, index) => {
	// 		return {
	// 			id: item.name,
	// 			url: item.url,
	// 			name: `样本${index + 1}`
	// 		}
	// 	})
	// }
})

onReady(() => {})

const onFabClick = () => {
	const url = `/pages/chat/chat`
	uni.navigateTo({
		url
	})
}

const navToResult = () => {
	const url = `/pages/teacher/list/index2`
	uni.navigateTo({
		url
	})
}

const onFileSuccess = e => {
	console.log('onFileSuccess: ', e)
	const num = sampleImgList.value.length
	const files = e.tempFiles.map(item => {
		return {
			id: item.name,
			url: item.url,
			name: `样本${num + 1}`
		}
	})
	sampleImgList.value = sampleImgList.value.concat(files)
	uni.setStorageSync('tempFiles', sampleImgList.value)
	addSample(files[0])
}

const addSample = async file => {
	const sample = uniCloud.importObject('sample')
	try {
		const res = await sample.add(file)
		console.log(res)
	} catch (e) {
		console.log(e.errMsg)
	}
}

const getSample = async () => {
	const sample = uniCloud.importObject('sample')
	try {
		const res = await sample.get()
		console.log(res)
		sampleImgList.value = res.data
	} catch (e) {
		console.log(e.errMsg)
	}
}

const previewImage = url => {
	uni.previewImage({
		urls: [url]
	})
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
